<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>{$index.name}</title>

    {CSS href="__ADDONSTATIC__/weui/css/weui.min.css" /}
    {CSS href="__ADDONSTATIC__/weui/css/jquery-weui.min.css" /}
    {CSS href="__ADDONSTATIC__/css/temp_style.css" /}
    {CSS href="__ADDONSTATIC__/css/swiper-4.3.5.min.css" /}

</head>
<body>
<div id="columns-header">
    <div class="swiper-container" >
        <div class="swiper-wrapper">
            {volist name='columns' id='column'}
            <div class="swiper-slide">
                <a href="{:addonUrl('index/columns',['id'=>$column.id])}" {if condition="$cols_id == $column.id"}class="on"{/if}>
                {$column.name}
                </a>
            </div>
            {/volist}

        </div>

    </div>
</div>


<div class="swiper-container" id="slider">
    <div class="swiper-wrapper">
        {volist name='sliders' id='slider'}
        <div class="swiper-slide">
            <a href="{$slider.url}">
                <img src="{$slider.img_path}" alt=""/>
                <h2>{$slider.describe}</h2>
            </a>
        </div>
        {/volist}

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>


</div>

<div class="article-list">
    {volist name='articles' id='article'}
    <a href="{:addonUrl('index/article',['id'=>$article.id])}" class="weui-flex clearfix">
        <div class="weui-flex">
            <div class="weui-flex__item3">
                <div class="article-info flex-distance">
                    <h2 class="article-title">{$article.title}</h2>
                    <p>{$article.add_time}</p>
                </div>

            </div>
            <div class="weui-flex__item2 flex-distance">
                <div class="article-image-wrap">
                    <div class="article-image">
                        <img src="{$article.cover}" alt=""/>
                    </div>
                </div>
            </div>
        </div>
    </a>
    {/volist}
</div>


{js href='__ADDONSTATIC__/weui/js/jquery-1.11.3.min.js' /}
{js href='__ADDONSTATIC__/weui/js/jquery-weui.min.js' /}
{js href='__ADDONSTATIC__/weui/js/swiper-4.3.5.min.js' /}
<script>
    var mySwiper = new Swiper ('#slider', {
        loop: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination'
        }
    })

    var mySwiper = new Swiper ('#columns-header .swiper-container', {
        slidesPerView : 5,

    })


</script>

</body>
</html>